<template class="aaa">
	<view class="commission">
		<cu-custom bgColor="bg-gradual-orange-red" :isBack="true">
			<block slot="content">我的分享佣金</block>
		</cu-custom>
		<view class="commission-top items-top">
			<view class="forecast">
				<view class="basis-info">
					<image src="../../../static/share-card.png"></image>
					<view class="commission-title">预估收益</view>
				</view>
				<view class="commission-num">{{notacc | toFloat}}</view>
			</view>
			<view class="account">
				<view class="basis-info">
					<image src="../../../static/share-tarle.png"></image>
					<view class="commission-title">到账收益</view>
				</view>
				<view class="commission-num">{{acc | toFloat}}</view>
			</view>
		</view>
		<view class="middle-banner">
			<image src="../../../static/commission-middle.png"></image>
			<view class="commission-info">
				<button class="tips-title" plain="true" @click="takeInvite">点击分享其他商户入驻</button>
				<view class="tips-note">成功邀请以为商户入驻可获得分享金50元</view>
				<view class="showTips" @click="closeTips">邀请规则</view>
			</view>
			<!-- <view class="showTips">邀请规则</view> -->
		</view>

		<view class="my-record items-top">
			<view class="record-title">我分享的商户</view>
			<view class="record-list" v-if="record">
				<view class="list-item" v-for="item in record" :key="item.id">
					<text class="item-label items-name">{{item.name}}</text>
					<text class="item-status item-label" v-if="itme.state==1">等待确认</text>
					<text class="item-status item-label items-success" v-if="itme.state==0">邀请成功</text>
				</view>
				<uni-load-more :status="more" v-if="record"></uni-load-more>
			</view>
		</view>
		<view class="onload-tips" v-if="openTips">
			<image class="note-img" src="../../../static/share-note.png"></image>
			<view class="tips-list">
				<view class="tips-item">1、转发通过微信邀请他人入驻付加加智慧商圈!</view>
				<view class="tips-item">2、受邀商户通过认证，并成功入驻。</view>
				<view class="tips-item">3、受邀商户正常使用，并通过付加加连续收款额满2000元。</view>
				<view class="tips-item">4、邀请人获得50元/人的邀请奖励，可提现至微信。</view>
				<view class="tips-item">5、本活动最终解释权归付加加平台方所有。</view>
				<view class="close-btn">
					<text class="cuIcon-roundclose" v-on:click="closeTips"></text>
				</view>
				<!-- <image class="close-btn" src="../../../static/share-guanbi.png" v-on:click="closeTips" mode="aspectFill"></image> -->
			</view>
			<!-- <button v-on:click="closeTips">guanbi</button> -->
		</view>
		<my-show-model @getValue="takeInvite" @getValues="takeInvite" v-if="inviteTips" :showModel="showModel"></my-show-model>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import shops from '@/api/shop';
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import MyShowModel from "@/components/MyShowModel";
	export default {
		data() {
			return {
				more: 'more',
				page: 1,
				openTips: false,
				acc: 0,
				record: [],
				notacc: 0,
				shops: true,
				inviteTips: false,
				share: {
					path: '/pages/my/shop/apply',
					title: '邀请函',
					imageUrl: '/static/share-03.png'
				},
				showModel:{
					title:'提示',
					message:'去微信邀请好友入驻付加加',
				}
			}
		},
		computed: {
			...mapState(['config', 'hasLogin', 'userInfo', 'imgHost']),
		},
		components: {
			uniLoadMore,
			MyShowModel
		},
		filters: {
			toFloat(number) {
				let nums = number.toFixed(1);
				return nums;
			}
		},
		onShareAppMessage(res) {
			return {
				path: this.share.path + '?outPutUid=' + this.userInfo.id,
				title: this.share.title,
				imageUrl: this.share.imageUrl
			}
		},
		onLoad(params) {
			if (this.hasLogin) {
				this.$store.dispatch('user')
			}
			this.inviteTips =false;
			this.getRecord();
			console.log(this.userInfo);
			// this.getShops();
		},
		onShow() {
			this.inviteTips =false;
			this.inviteTips =false;
		},
		onReachBottom() {
			if (this.more !== 'noMore') {
				this.more = 'noMore';
				// this.more = 'loading'
				this.page++;
				// this.getShops();
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 50) { //当距离大于600时显示回到顶部按钮
				this.flag = true
			} else { //当距离小于600时隐藏回到顶部按钮
				this.flag = false
			}
		},
		methods: {
			takeInvite(){
				this.inviteTips = !this.inviteTips;
			},
			closeTips: function() {
				this.openTips = !this.openTips;
			},
			async getRecord() {
				let res = await shops.getShareList({
					page: this.page
				})
				if (res.code == 1) {
					if (res.data.notacc) {
						this.notacc = res.data.notacc;
					}
					if (res.data.acc) {
						this.acc = res.data.acc;
					}
					if (res.data.list.length <= 0) {
						this.more = 'noMore';
					} else {
						this.more = 'more';
					}
					if (res.data.list.length > 0) {
						this.record = res.data.list ? res.data.list : this.record.concat(res.data.list)
					}
				} else {
					console.log(res.msg);
				}
			}

		}
	}
</script>

<style lang="less">
	.commission {
		background-color: #ffffff;
		font-family: "SimHei";
		position: relative;
		.items-top {
			margin-top: 20rpx;
		}
		.commission-top {
			height: 150rpx;
			text-align: center;
			padding: 0 20rpx;

			.forecast {
				margin-right: 10rpx;
			}

			.forecast,
			.account {
				width: 350rpx;
				display: inline-block;
				border: 1rpx solid rgb(217, 215, 215);

				.basis-info {
					width: 175rpx;
					text-align: center;
					display: inline-block;
					float: left;
					margin-top: 20rpx;

					image {
						width: 45rpx;
						height: 45rpx;
					}

					.commission-title {
						font-size: 35rpx;
						color: #333333;
						margin-top: 20rpx;
					}
				}
				.commission-num {
					display: inline-block;
					width: 171rpx;
					height: 150rpx;
					line-height: 150rpx;
					font-size: 60rpx;
					color: rgb(239, 51, 33);
				}

			}

		}

		.middle-banner {
			padding: 0 20rpx;
			height: 200rpx;
			margin-top: 20rpx;
			position: relative;
			z-index: 1;

			image {
				height: 200rpx;
				width: 100%;
			}

			.commission-info {
				height: 200rpx;
				width: 350rpx;
				position: absolute;
				top: 0;
				left: 100rpx;
				z-index: 2;
				font-family: 'SimHei';
				color: #ffffff;
				.tips-title {
				    margin-top: 20rpx;
				    font-size: 30rpx;
				    border: none;
				    padding: 0;
				    text-align: left;
				    color: #ffffff;
				    height: 50rpx;
					line-height: 50rpx;
				}
				.tips-note {
					font-size: 19rpx;
					height: 60rpx;
					line-height: 60rpx;
				}
				.showTips {
					color: #fde276;
					font-size: 30rpx;
					border: 2rpx solid #fde276;
					width: 200rpx;
					height: 44rpx;
					line-height: 40rpx;
					text-align: center;
				}
			}

		}

		.my-record {
			margin: 20rpx 20rpx 0;
			padding: 0 40rpx;
			padding-bottom: 40rpx;
			background-image: linear-gradient(#fc946b, #fbefe3);
			border-radius: 15rpx;

			.record-title {
				display: block;
				height: 150rpx;
				line-height: 150rpx;
				font-family: "SimHei";
				font-size: 35rpx;
				color: #ffffff;
				text-align: center;
			}

			.record-list {
				padding: 0 70rpx;
				padding-top: 40rpx;
				background-color: #ffffff;
				border-radius: 15rpx;

				.list-item {
					margin-bottom: 40rpx;
					border-radius: 10rpx;
					box-shadow: 0rpx 2rpx 17rpx 1rpx rgba(203, 179, 147, 1);

					.item-label {
						width: 45%;
						display: inline-block;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
					}

					.items-name {
						background-color: #ff7113;
						color: #ffffff;
						position: relative;
						border-top-left-radius: 10rpx;
						border-bottom-left-radius: 10rpx;

					}

					.items-success {
						color: rgb(119, 119, 119);
					}

					.items-name::after {
						content: '';
						height: 60rpx;
						width: 25rpx;
						position: absolute;
						right: -22rpx;
						top: 0;
						background-image: url(../../../static/share-right.png);
						background-repeat: no-repeat;
						background-size: 15rpx 60rpx;
					}

					.item-status {
						padding-right: 20rpx;
						text-align: right;
						color: #777777;
						border-top-right-radius: 10rpx;
						border-bottom-right-radius: 10rpx;
					}

				}
			}
		}

		.onload-tips {
			position: absolute;
			width: 500rpx;
			height: 630rpx;
			left: 125rpx;
			top: 253rpx;
			z-index: 3;
			.note-img {
				width: 500rpx;
				height: 300rpx;
			}

			.tips-list {
				background-color: #ffffff;
				color: #000000;
				font-size: 25rpx;
				padding: 30rpx;

				.tips-item {
					margin: 30rpx 0;
				}
			}

			.close-btn {
				height: 45rpx;
				line-height: 45rpx;
				text-align: center;

				text {
					font-size: 45rpx;
					color: #8a8484;
				}
			}
		}
	}
</style>
